<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/jh/admin/components/meta.html" />
    <title>排课 ${metaTitleSuffix!}</title>
    <#include "/jh/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="1-2" />
            <#include "/jh/admin/components/menu.html" />
            <el-container>
                <#include "/jh/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="课程名称">
                                <el-select v-model="info.courseId" filterable placeholder="请选择课程名称" @change="changeCourse">
                                    <template v-for="item in courses">
                                        <el-option :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="主题">
                                <el-select v-model="selectedTopic" filterable placeholder="请选择主题" allow-create filterable default-first-option>
                                    <el-option v-for="(item, index) in topics" :key="index" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="日期">
                                <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="时间">
                                <template>
                                    <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '09:00', step: '00:05', end: '21:00' }">
                                    </el-time-select>
                                    <!-- <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '06:00', step: '00:05', end: '23:30', minTime: startTime }">
                                    </el-time-select> -->
                                </template>
                            </el-form-item>
                            <el-form-item label="课程时长">
                                <el-select v-model="selectedCourseTime" placeholder="请选择">
                                    <el-option :label="item+'分钟'" :value="item" :key="item" v-for='item in times'></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="老师">
                                <el-radio-group v-model="teacherType" size="small">
                                    <el-radio-button :label="0">选择</el-radio-button>
                                    <el-radio-button :label="1">新建</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="" v-if="teacherType == 0">
                                <el-select v-model="info.staffId" filterable placeholder="请选择老师">
                                    <el-option v-for="(item, index) in staffs" :key="index" :label="item.englishName" :value="item.id">{{item.englishName}} <span style="color: gray">{{item.name}}</span><span v-if='item.isPartTime' style="color: red">兼职</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="" v-if="teacherType == 2">
                                <el-select v-model="info.staffId" filterable placeholder="请选择兼职老师">
                                    <el-option v-for="(item, index) in partTimeTeacher" :key="index" :label="item.englishName" :value="item.id">{{item.englishName}} <span style="color: gray">{{item.name}}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="" v-if="teacherType == 1">
                                <el-input v-model="info.partTimeTeacherName" placeholder="请输入老师名字"></el-input>
                            </el-form-item>
                            <el-form-item label="教室">
                                <el-input v-model="info.classroom"></el-input>
                            </el-form-item>
                            <el-form-item label="校区">
                                <el-select v-model="info.schoolId" placeholder="请选择校区">
                                    <el-option v-for="(item, index) in schools" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label='限定人数'>
                                <el-switch v-model="isLimit" active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="最大人数" v-if='isLimit'>
                                <el-input v-model="selectedLimit" type="number"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="是否隐藏">
                                <el-radio-group v-model="info.isHide">
                                    <el-radio :label="0">否</el-radio>
                                    <el-radio :label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                            <el-form-item label='是否隐藏'>
                                <el-switch v-model="isHide" active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                                <el-button @click="back">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/jh/admin/components/footer.html" />
    </div>
    <#include "/jh/admin/components/scripts.html" />
    <script src="https://cdn.bootcss.com/json5/0.5.1/json5.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>
    <script>
    function initData(vue) {
        // console.log(vue.schools)

    }
    </script>
    <script type="text/javascript">
    var ctrl = this;
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                courses: [],
                topics: [],
                staffs: [],
                schools: [],
                selectedTopic: '',
                selectedCourseTime: 60,
                selectedLimit: 0,
                date: '',
                startTime: '',
                endTime: '',
                teacherType: 0,
                courseTime: 80,
                times: [60, 90, 120],
                isLimit: true,
                isHide: false,
                partTimeTeacher: []
            }
        },
        watch: {
            teacherType: function(val) {
                if (val == 1) {
                    this.info.staffId = null;
                } else {
                    this.info.partTimeTeacherName = '';
                }
            }
        },
        mounted: function() {
            // var format = require('date-fns/format')
            // var today = $.format.date(new Date(), "yyyy-MM-dd")
            // alert(today)
            var schoolStr = '${schools!}';
            var courseStr = '${courses!}';
            var staffStr = '${staffs!}';
            var infoStr = '${info!}';
            if (schoolStr != '') {
                this.schools = JSON5.parse(schoolStr);
            }
            if (courseStr != '') {
                this.courses = JSON5.parse(courseStr);
            }
            if (staffStr != '') {
                this.staffs = JSON5.parse(staffStr);
            }
            var partTimeTeacher = '${partTimeTeacher!}'
            if (partTimeTeacher != '') {
                this.partTimeTeacher = JSON5.parse(partTimeTeacher)
            }
            if (infoStr != '') {
                this.info = JSON.parse(infoStr); //JSON.parse(infoStr);
                this.selectedTopic = this.info.topic;
                this.selectedCourseTime = this.info.courseTime;
                this.date = this.info.date;
                this.startTime = this.info.startTime;
                this.endTime = this.info.endTime;
                this.courseTime = this.info.courseTime;
                this.isHide = this.info.isHide == 1;
                if ((this.info.staffId == null || this.info.staffId == '') &&
                    (this.info.partTimeTeacherName != null && this.info.partTimeTeacherName != '')) {
                    this.teacherType = 1;
                } else {
                    this.teacherType = 0;
                }
                if (this.info.courseId != null && this.info.courseId != '') {
                    var selectedCourse;
                    for (var i = 0; i < this.courses.length; i++) {
                        if (this.courses[i].id == this.info.courseId) {
                            selectedCourse = this.courses[i];
                            break;
                        }
                    }
                    this.topics = JSON.parse(selectedCourse.topics);
                }
            }
            // if (this.date == null) {
            //     this.date = $.format.date(new Date(), "yyyy-MM-dd")
            // }
            if (this.info.limit != null) {
                this.isLimit = (this.info.limit > 0);
                this.selectedLimit = this.info.limit;
            }
        },
        methods: {
            submit() {
                var self = this;
                // var h1 = self.startTime.split(":")[0];
                // var m1 = self.startTime.split(":")[1];
                // var h2 = self.endTime.split(":")[0];
                // var m2 = self.endTime.split(":")[1];
                // if ((h1 > h2) || (h1 == h2 && m1 >= m2)) {
                //     msg("起始时间不能大于等于结束时间");
                //     return;
                // }

                var param = Qs.stringify({
                    arrangeId: self.info.id,
                    courseId: self.info.courseId,
                    topic: self.selectedTopic,
                    date: self.date,
                    startTime: self.startTime,
                    endTime: self.endTime,
                    staffId: self.info.staffId,
                    partTimeTeacherName: self.info.partTimeTeacherName,
                    classroom: self.info.classroom,
                    schoolId: self.info.schoolId,
                    limit: self.isLimit ? self.selectedLimit : 0,
                    isHide: self.isHide ? 1 : 0,
                    courseTime: self.selectedCourseTime
                });
                loading();
                axios({
                        url: '/jh/admin/arrange/submit',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            endLoading();
                            window.location.href = "/jh/admin/arrange/list";
                            // msg("登录成功");
                        } else {
                            endLoading();
                            msg(response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("提交失败");
                        console.log(error);
                    });
            },
            changeCourse(val) {
                this.selectedTopic = "";
                var selectedCourse;
                for (var i = 0; i < this.courses.length; i++) {
                    if (this.courses[i].id == val) {
                        selectedCourse = this.courses[i];
                        break;
                    }
                }
                this.topics = JSON.parse(selectedCourse.topics);
                this.selectedCourseTime = selectedCourse.courseTime;
                this.isLimit = selectedCourse.limit > 0;
                this.selectedLimit = selectedCourse.limit;
            },
            back() {
                window.history.back();
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .topicItem {
        margin-bottom: 1rem;
    }

    .topic-del {
        margin-left: 1rem;
        cursor: pointer;
    }
    </style>
    <#include "/jh/admin/components/msg.html" />
</body>

</html>